<template>
  <div class="scroll" style="height: 100vh; overflow-y: auto">
    <!-- 头部 -->
    <div class="head">
      <div class="row">
        <div class="title">
          <a>{{ $t("Jiaxing Port Ship Information Sharing Platform") }}</a>
        </div>
        <div class="info">
          <div
            @mouseover="showliebiao"
            @mouseleave="hiddenliebiao"
            class="icon liebiao"
          >
            <svg-icon class="svg-mid" icon-class="liebiao"></svg-icon>
            <el-collapse-transition>
              <div v-show="lbstate" class="liebiao-tk">
                <span
                  @click="editLang('chs')"
                  class="menu-item"
                  :class="[this.$i18n.locale == 'chs' ? 'lang-xz' : '']"
                >
                  <span class="co-tl">CN</span>
                  简体中文
                </span>
                <span
                  @click="editLang('en')"
                  class="menu-item"
                  :class="[this.$i18n.locale == 'en' ? 'lang-xz' : '']"
                >
                  <span class="co-tl">US</span>
                  English
                </span>
              </div>
            </el-collapse-transition>
          </div>
          <div
            @mouseover="showtk"
            @mouseleave="hiddentk"
            class="icon login"
            :class="[userinfo === null ? 'round' : '']"
          >
            <svg-icon
              v-if="userinfo === null"
              class="svg-sm"
              icon-class="login"
            ></svg-icon>
            <svg-icon
              v-else
              class="svg-sm-mid"
              icon-class="touxiang"
            ></svg-icon>
            <el-collapse-transition>
              <div v-show="tkstate" class="info-tk">
                <el-collapse accordion>
                  <el-collapse-item
                    v-for="(item, index) in userNav"
                    :key="index"
                  >
                    <template  slot="title">
                      <svg-icon class="svg-sm co-tl" icon-class="console" />
                      {{ item.meta.title }}
                    </template>
                    <span
                      v-for="(child, index) in item.children"
                      :key="index"
                      @click="href('http://www.baidu.com')"
                      class="menu-item"
                    >
                      <span class="co-tl-lz">{{ child.meta.title }}</span>
                    </span>
                  </el-collapse-item>
                  <el-collapse-item v-if="userinfo === null">
                    <template slot="title">
                      <svg-icon class="svg-sm co-tl" icon-class="link" />
                      {{ $t("External Link") }}
                    </template>
                    <span
                      @click="
                        href('http://www.nbport.com.cn/cbos/cboswms/login2.jsp')
                      "
                      class="menu-item"
                    >
                      <span class="co-tl-lz">{{
                        $t("Entry Declaration")
                      }}</span>
                    </span>
                    <span
                      @click="
                        href('http://www.nbport.com.cn/cbos/cboswms/login2.jsp')
                      "
                      class="menu-item"
                    >
                      <span class="co-tl-lz">{{ $t("Job Registration") }}</span>
                    </span>
                    <span
                      @click="href('http://169.169.171.154/#/')"
                      class="menu-item"
                    >
                      <span class="co-tl-lz">{{ $t("External Link") }}</span>
                    </span>
                  </el-collapse-item>
                </el-collapse>
                <span
                  @click="SignOut"
                  v-if="userinfo !== null"
                  class="menu-item"
                >
                  <svg-icon class="svg-sm co-tl" icon-class="exit" />
                  <span class="menu-item-title">{{ $t("Sign Out") }}</span>
                </span>
              </div>
            </el-collapse-transition>
          </div>
          <span @click="ToLogin">{{
            userinfo === null ? $t("Log In") : userinfo.userId
          }}</span>
        </div>
      </div>
    </div>
    <!-- 图片滚动 -->
    <div class="container">
      <div class="carousel">
        <swiper></swiper>
      </div>
      <!-- 表格 -->
      <div class="tab">
        <div class="tab-title">
          <div class="tab-search">
            <el-date-picker
              v-model="param.startTime"
              type="date"
              :placeholder="$t('Select Date')"
              size="small"
              style="width: 150px"
              value-format="yyyyMMdd"
            >
            </el-date-picker>
            <!-- <input type="date" v-model="param.startTime" /> -->
            <span>-</span>
            <el-date-picker
              v-model="param.endTime"
              type="date"
              :placeholder="$t('Select Date')"
              size="small"
              style="width: 150px"
              value-format="yyyyMMdd"
            >
            </el-date-picker>
          </div>
          <div class="tab-search">
            <span>{{ $t("Ship Name") }}</span>
            <input class="text" v-model="param.vesselName" />
          </div>
        </div>
        <div class="tab-contain">
          <div class="tr">
            <div class="avg-8">{{ $t("VESSEL_NAMEC") }}</div>
            <div class="avg-8 lg">{{ $t("VESSEL_NAMEE") }}</div>
            <div class="avg-8 sm">{{ $t("VESSEL_TYPE_NAME") }}</div>
            <div class="avg-8">{{ $t("SHORT_BERTH_NAME") }}</div>
            <div class="avg-8">{{ $t("PREARRIVEDATETIME") }}</div>
            <div class="avg-8">{{ $t("ESTIMATEDCONFIRMTIME") }}</div>
            <div class="avg-8 sm">{{ $t("Status") }}</div>
            <div class="avg-8">{{ $t("Last Update Time") }}</div>
          </div>
          <div class="td" v-for="(item, index) in quickList" :key="index">
            <div class="avg-8">{{ item.VESSEL_NAMEC }}</div>
            <div class="avg-8 lg">{{ item.VESSEL_NAMEE }}</div>
            <div class="avg-8 sm">{{ item.VESSEL_TYPE_NAME }}</div>
            <div class="avg-8">{{ item.SHORT_BERTH_NAME }}</div>
            <div class="avg-8">{{ item.PREARRIVEDATETIME }}</div>
            <div class="avg-8">{{ item.ESTIMATEDCONFIRMTIME }}</div>
            <div class="avg-8 sm"></div>
            <div class="avg-8"></div>
          </div>
        </div>
      </div>
    </div>
    <!--内容 -->
    <div class="body">
      <div class="items">
        <div :class="[screenWidth < 800 ? 'bw' : '']" class="item">
          <div class="i-title">
            <a>{{ $t("Local Tide") }}</a>
            <a>{{ today }}</a>
          </div>
          <div class="i-conts">
            <div class="i-item">
              <div class="b-r-s b-b-s">{{ $t("Tide Time") }}</div>
              <div class="b-r-s">{{ $t("High Tide") }}</div>
            </div>
            <div v-for="(item, index) in tideList" :key="index" class="i-item">
              <div class="b-b-s">{{ item.heightTime }}</div>
              <div>{{ item.tideHeight }}</div>
            </div>
          </div>
          <div class="it-date">
            <div
              @click="setDay(0)"
              class="tdate"
              :class="[day == '0' ? 't_xz' : '']"
            >
              {{ $t("Today") }}
            </div>
            <div
              @click="setDay(1)"
              class="tdate"
              :class="[day == '1' ? 't_xz' : '']"
            >
              {{ $t("Tomorrow") }}
            </div>
            <div
              @click="setDay(2)"
              class="tdate"
              :class="[day == '2' ? 't_xz' : '']"
            >
              {{ $t("Acquired") }}
            </div>
          </div>
        </div>
        <div class="item"></div>
        <!-- <div class="jgx"></div> -->
        <div class="item" :class="[screenWidth < 800 ? 'bw' : '']">
          <div class="i-title">
            <a>{{ $t("Important Notice") }}</a>
          </div>
          <div class="i-contzs">
            <div
              @click="showtck('notice', item.id)"
              v-for="(item, index) in noticeList"
              :key="index"
              class="i-item-not"
            >
              <div class="avg-2">{{ item.title }}</div>
              <div class="avg-2">{{ item.time + " " + item.from }}</div>
            </div>
          </div>
        </div>
        <div class="item" :class="[screenWidth < 800 ? 'bw' : '']">
          <div class="i-title">
            <a>{{ $t("Warning Information") }}</a>
          </div>
          <div class="i-contzs">
            <div
              @click="showtck('warn', item.id)"
              v-for="(item, index) in warnList"
              :key="index"
              class="i-item-not"
            >
              <div class="avg-2">{{ item.title }}</div>
              <div class="avg-2">{{ item.time + " " + item.from }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 尾部 -->
    <div class="foot"></div>
    <!-- 弹框 -->
    <transition name="tckshow">
      <div class="contain" v-if="tckState">
        <div class="tck">
          <div class="closeItem">
            <svg-icon @click="closetck" class="svg-sm" icon-class="close" />
          </div>
          <div class="fgItem"></div>
          <div class="tck-title">{{ detail.title }}</div>
          <div class="tck-contain">{{ detail.content }}</div>
          <div class="tck-foot">
            <div class="avg-3">{{ $t("Release Time") }}：{{ detail.time }}</div>
            <div class="avg-3 center">
              {{ $t("Publisher") }}：{{ detail.from }}
            </div>
            <div class="avg-3 end">
              {{ $t("Information Sources") }}：{{ detail.source }}
            </div>
          </div>
        </div>
      </div>
    </transition>

    <el-backtop
      target=".scroll"
      :bottom="150"
      :right="100"
      :visibility-height="300"
    ></el-backtop>
  </div>
</template>
<script>
import home from "@view/home";
export default home;
</script>
<style lang="less" scoped>
@import "~@/assets/css/home.less";
</style>